<template>
  <view class="content">
    <view class="head">
      <view class="con">
        <view class="title">
          <image src="../../static/icon/power.png"></image>
          <label>智能防盗</label>
        </view>
        <view>
          <text>使用 4 个权限</text>
        </view>
      </view>
    </view>
    <view class="body">
      <view class="switch">
        <label>允许其他设备使用蓝牙连接</label>
        <switch
          :checked="!systemSettings.allow_others"
          @change="change('allow_others', $event)"
          type="checkbox"
        ></switch>
      </view>
      <view class="switch">
        <label>开启设备蓝牙</label>
        <switch
          :checked="!systemSettings.on_bluetooth"
          @change="change('on_bluetooth', $event)"
          v-model="is_change"
          type="checkbox"
        ></switch>
      </view>
      <view class="switch">
        <label>警报时开启蜂鸣器</label>
        <switch
          :checked="!systemSettings.on_buzzer"
          @change="change('on_buzzer', $event)"
          type="checkbox"
        ></switch>
      </view>
      <view class="switch">
        <label>警报时开启手机震动</label>
        <switch
          :checked="!systemSettings.on_vibration"
          @change="change('on_vibration', $event)"
          type="checkbox"
        ></switch>
      </view>
    </view>
    <view class="bottom">
      <view class="btn">
        <button
          class="button_1"
          :disabled="!is_change"
          @click="submit"
          :class="{ button_2: !is_change }"
        >
          确认修改
        </button>
      </view>
    </view>
  </view>
</template>

<script>
// 引入请求模块
import { getRequest, postRequest } from "@/api/api.js";
// 引入url
import { systemSettings } from "@/api/request.js";
export default {
  name: "system",
  created() {
    this.getsystemSettings();
  },
  onLaunch() {},
  data() {
    return {
      systemSettings: {
        allow_others: 0,
        on_bluetooth: 0,
        on_buzzer: 0,
        on_vibration: 0,
      },
      is_change: false,
    };
  },
  methods: {
    // 获取系统设置信息
    async getsystemSettings() {
      const info = await getRequest(systemSettings);
      console.log(info);
      if (!info[1].data.firstLogin) {
        this.systemSettings = info[1].data.data[0];
        console.log(this.systemSettings);
      }
    },
    change(value, event) {
      this.is_change = true;
      if (value == "allow_others") {
        this.systemSettings.allow_others = event.target.value ? 0 : 1;
      } else if (value == "on_bluetooth") {
        this.systemSettings.on_bluetooth = event.target.value ? 0 : 1;
      } else if (value == "on_buzzer") {
        this.systemSettings.on_buzzer = event.target.value ? 0 : 1;
      } else {
        this.systemSettings.on_vibration = event.target.value ? 0 : 1;
      }
    },
    async submit() {
      this.is_change = false;
      const result = await postRequest(systemSettings, this.systemSettings);
      if (result[1].data.status === 0) {
        uni.showToast({
          icon: "none",
          title: "修改系统设置成功！",
          duration: 1500,
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "服务器连接失败，请稍后再试！",
          duration: 1500,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .head {
    padding: 20rpx 40rpx;
    border-bottom: 2rpx solid #cfcece;
    box-shadow: 0 -2rpx 10rpx 10rpx #f0efef;
    background-color: #f7f7f7;
    .con {
      height: 12vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        display: flex;
        align-items: center;

        image {
          width: 60rpx;
          height: 60rpx;
        }
        label {
          color: #595959;
          padding-left: 20rpx;
        }
      }
      text {
        color: #888888;
      }
    }
  }
  .body {
    margin: 20rpx 40rpx;
    .switch {
      height: 10vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #cfcece;
      label {
        color: #595959;
        font-size: 30rpx;
      }
    }
  }
  .bottom {
    .btn {
      height: 20vh;
      display: flex;
      align-items: center;
      .button_1 {
        width: 90%;

        background-color: #646262;
        color: #fff;
      }
      // button:active {
      //   background-color: #9e9d9d;
      // }
      .button_2 {
        width: 90%;
        background-color: #bebebe;
        color: #fff;
      }
    }
  }
}
</style>